/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';
import Boy from './js/Boy'
import HomePage from './navigators/HomePage'
import AppNavigators from './navigators/AppNavigators'
import AppTabNavigator from './navigators/AppNavigators'
import Navigator from 'react-native-deprecated-custom-components'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: 'tab_popular'
        }

    }

//     render() {
//         return (
//             <View style={styles.container}>
//                 {/*
//                 <TabNavigator>
//                     <TabNavigator.Item
//                         selected={this.state.selectedTab === 'tab_popular'}
//                         selectedTitleStyle={{color: 'red'}}
//                         title="Home"
//                         renderIcon={() => <Image style={styles.image} source={require('./images/home.png')}/>}
//                         renderSelectedIcon={() => <Image style={[styles.image, {tintColor: 'red'}]}
//                                                          source={require('./images/home.png')}/>}
//                         // badgeText="1"
//                         onPress={() => this.setState({selectedTab: 'tab_popular'})}>
//                         <View style={styles.page1}>
//                         </View>
//                     </TabNavigator.Item>
//                     <TabNavigator.Item
//                         selected={this.state.selectedTab === 'trending'}
//                         selectedTitleStyle={{color: 'red'}}
//                         title="Profile"
//                         renderIcon={() => <Image style={styles.image} source={require('./images/trending.png')}/>}
//                         renderSelectedIcon={() => <Image style={[styles.image, {tintColor: 'red'}]}
//                                                          source={require('./images/trending.png')}/>}
//                         onPress={() => this.setState({selectedTab: 'trending'})}>
//                         <View style={styles.page2}>
//
//                         </View>
//                     </TabNavigator.Item>
//
//                     <TabNavigator.Item
//                         selected={this.state.selectedTab === 'favorite'}
//                         selectedTitleStyle={{color: 'red'}}
//                         title="Home"
//                         renderIcon={() => <Image style={styles.image} source={require('./images/favorite.png')}/>}
//                         renderSelectedIcon={() => <Image style={[styles.image, {tintColor: 'red'}]}
//                                                          source={require('./images/favorite.png')}/>}
//                         // badgeText="1"
//                         onPress={() => this.setState({selectedTab: 'favorite'})}>
//                         <View style={styles.page1}>
//                         </View>
//                     </TabNavigator.Item>
//                     <TabNavigator.Item
//                         selected={this.state.selectedTab === 'mine'}
//                         selectedTitleStyle={{color: 'red'}}
//                         title="Profile"
//                         renderIcon={() => <Image style={styles.image} source={require('./images/mine.png')}/>}
//                         renderSelectedIcon={() => <Image style={[styles.image, {tintColor: 'red'}]}
//                                                          source={require('./images/mine.png')}/>}
//                         onPress={() => this.setState({selectedTab: 'mine'})}>
//                         <View style={styles.page2}>
//
//                         </View>
//                     </TabNavigator.Item>
//                 </TabNavigator>
//                 */}
//
//                 {/*
//                     <Navigator
//                         initialRoute={{
//                             component: Boy
//                         }}
//                         renderScene={(route, navigator) => {
//                             let Component = route.component;
//                             return <Component navigator={navigator} {...route.params}/>
//                         }}>
//
//                     </Navigator>
// */}
//
//                 <HomePage/>
//
//             </View>
//         );
//     }

    render(){
        return(
            <AppNavigators/>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    page1: {
        flex: 1,
        backgroundColor: 'red'
    },
    page2: {
        flex: 1,
        backgroundColor: 'blue'
    },
    image: {
        width: 22,
        height: 22
    }

});
